<template>
    <div class="index-wrapper page">
        <p class="index-title">组件/插件 列表</p>
        <my-list>
            <my-list-item v-for="item in demoLink" :key="item.id">
                    <router-link tag="div" :to="item.link">{{item.name}}</router-link>
            </my-list-item>
        </my-list>
    </div>
</template>

<script>
    import MyList from '../components/myList/myList'
    import MyListItem from '../components/myList/myListItem'
    export default {
        name: 'index',
        components: {
          MyList,
          MyListItem
        },
        data() {
          return{
            demoLink: [
                {
                    id: 1,
                    link: '/toast',
                    name: 'toast'
                },
                {
                    id: 2,
                    link: '/confirm',
                    name: 'confirm'
                },
                {
                    id: 3,
                    link: '/swiper',
                    name: 'swiper'
                },
                {
                    id: 4,
                    link: '/upload',
                    name: 'upload'
                },
                {
                    id: 5,
                    link: '/showForm',
                    name: 'form'
                }
            ]
          }
        },
        methods: {

        }
    }
</script>

<style scoped>
    .index-wrapper {
        padding: 0 .4rem;
    }
    .index-wrapper .index-title {
        padding: .4rem 0;
        font-size: .5rem;
        color: cadetblue;
    }
</style>
